
<template>
    <div v-for="item in todolistStore.filteredTodos" :key="item.id">
        <input type="checkbox" v-model="item.isFinished">
        <span>{{ item.text }}</span>
        <button @click="delTodo">Delete</button>
    </div>
</template>
  
<script setup>
import { useTodolistStore } from '@/stores/todoList'
import { ref } from 'vue'

const todolistStore = useTodolistStore()

const text = ref('')
const delTodo = () => {
    todolistStore.addTodo(text.value)
    text.value = ''
}
</script>

<style scoped lang="scss">
a {
    margin-right: 10px;
}
</style>